<template>
  <component :is="map[curComponent]"></component>
</template>
<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { useRoute } from 'vue-router'

import fiveBaseSort from './sort/fiveBaseSort.vue'

const route = useRoute()
const curComponent = ref()

// 动态组件map
const map = {
  fiveBaseSort,
}

watch(
  () => route.params,
  (newV, oldV) => {
    curComponent.value = newV.name
  },
  { immediate: true }
)
</script>
